<template>
  <div id="search">
    <header class="search-header">
      <div>
        <i @click="toRreturn" class="iconfont icon-fanhui"></i>
        <span>搜索</span>
      </div>
      <div class="search-header-input">
        <input v-model="keyWords" type="text" placeholder="请输入关键字">
        <span @click="toSearch">搜索</span>
      </div>
    </header>

    <div class="search-tips" v-if="!searchList.length">该宝贝暂时没有哦~ 尝试搜索"包包"</div>

    <SearchList :searchList="searchList"></SearchList>

    <footer class="search-footer">
      <div @click="switchRule(1)">
        <span>价格</span>
        <span :class="classObj" class="up up1">^</span>
        <span :class="classObj" class="iconfont icon-arrow-down down1"></span>
      </div>
      <div @click="switchRule(2)">
        <span>销量</span>
        <span :class="classObj" class="up up2">^</span>
        <span :class="classObj" class="iconfont icon-arrow-down down2"></span>
      </div>
    </footer>
  </div>
</template>
<script>
import SearchList from '@/components/SearchList/SearchList'
import { debounce } from '@/utils/utils.js'
export default {
  name: 'SamSearch',
  components: {
    SearchList
  },
  data() {
    return {
      keyWords: '',
      goodsList: [],
      searchList: [],
      // 排序规则：0价格升序 1价格降序 2销量升序 3销量降序
      orderRule:0,
      classObj:{
        active1:false,
        active2:false,
        active3:false,
        active4:false
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    toRreturn() {
      this.$router.back()
    },
    initData() {
      this.keyWords = this.$route.query.keyWords
      this.goodsList = this.$store.state.home.goodsList
      // 组件一挂载，则需要初始化改商品过滤列表
      this.toSearch()
    },
    // 对函数进行防抖
    toSearch: debounce(function () {
      let kw = this.keyWords
      this.searchList = this.goodsList.filter(v => {
        if (v.name.indexOf(kw) != -1 || v.title.indexOf(kw) != -1 || v.detailDesc.indexOf(kw) != -1) {
          return true
        } else {
          return false
        }
      })
    }, 500),
    // 转换排序规则
    switchRule(order){
      if(order === 1){
        if(this.orderRule === 0){
          this.orderRule = 1
          this.classObj.active1 = false
          this.classObj.active2 = true
        }else{
          this.orderRule = 0
          this.classObj.active3 = false
          this.classObj.active2 = false
          this.classObj.active4 = false
          this.classObj.active1 = true
        }
      }else if(order === 2){
        if(this.orderRule === 2){
          this.orderRule = 3
          this.classObj.active3 = false
          this.classObj.active4 = true
        }else{
          this.orderRule = 2
          this.classObj.active3 = true
          this.classObj.active4 = false
          this.classObj.active2 = false
          this.classObj.active1 = false
        }
      }
    },
    sortList(rule){
      switch(rule){
        case 0:
          this.searchList.sort((m,n)=>m.price - n.price)
          break
        case 1:
          this.searchList.sort((m,n)=>n.price - m.price)
          break
          // 使用id代替销量
        case 2:
          this.searchList.sort((m,n)=>m.id - n.id)
          break
        case 3:
          this.searchList.sort((m,n)=>n.id - m.id)
        
      }
    }
  },
  watch:{
    orderRule(newValue){
     switch(newValue){
      case 0:
        this.sortList(0)
        break
      case 1:
        this.sortList(1)
        break
      case 2:
        this.sortList(2)
        break
      case 3:
        this.sortList(3)
     }
    }
  }
};
</script>
<style lang='less' scoped>
#search {
  background-color: gainsboro;
  padding-top: 8rem;

  .search-header {
    width: 37.5rem;
    height: 6rem;
    position: fixed;
    top: 0;
    background-color: white;
    padding: 0.5rem;
    border-bottom: 0.1rem solid gainsboro;

    .iconfont {
      font-size: 1.5rem;
      margin-right: 1rem;
    }

    .search-header-input {
      margin-top: 1rem;

      input {
        width: 30rem;
        height: 2rem;
        font-size: 1.3rem;
        outline: none;
        background-color: gainsboro;
        border: none;
        border-radius: 0.2rem;
      }

      span {
        margin-left: 1rem;
        font-size: 1.8rem;
      }
    }


  }

  .search-tips {
    background-color: white;
    text-align: center;
    font-size: 1.3rem;
    margin-top: -1rem;
    padding-top: 5rem;
  }

  .search-footer {
    width: 37.5rem;
    line-height: 5rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;

    div {
      position: relative;
      font-size: 1.5rem;

      .up {
        font-size: 1.5rem;
      }

      .iconfont {
        font-size: 1.5rem;
        position: absolute;
        top: 0.4rem;
        left: 2.9rem;
      }

      .up1.active1 {
        font-size: 1.8rem;
        color: orange;
        font-weight: bold;
      }
      .down1.active2 {
        font-size: 1.8rem;
        color: orange;
        font-weight: bold;
        left: 2.7rem;
      }

      .up2.active3 {
        font-size: 1.8rem;
        color: orange;
        font-weight: bold;
      }
      .down2.active4 {
        font-size: 1.8rem;
        color: orange;
        font-weight: bold;
        left: 2.7rem;
      }
    }
  }
}</style>